<script setup lang="ts">
// 竞争-竞争品牌-品牌客群 属性画像

import {message} from "ant-design-vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import SycmBrandCustomerAttributePortraitChart
  from "~/contentScripts/views/sycm/brand_monitor/SycmBrandCustomerAttributePortrait/SycmBrandCustomerAttributePortraitChart.vue";
import {SycmBrand, SycmBrandLists, SycmBrandMonitor} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import RequestInterception from "~/utils/RequestInterception";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const brandLists = ref<SycmBrandLists>();
const loading = ref(false);
const showZs = ref(false);
const req: RequestInterception = getCurrentInstance()?.proxy?.$req;
const dataSource = ref<any[]>([]);
const columns = ref<any[]>([]);
const date = ref<string>('');
const calcColumns = () => {
  columns.value = [
    {
      title: "品牌名称",
      dataIndex: "brand.title",
      width: 200,
      sorter: (a: any, b: any) => a.brand.title.localeCompare(b.brand.title),
      dataType: 'brand',
      dataField: {
        brand_name: 'brand.title',
        brand_logo: 'brand.logo',
        // brand_url:'brand.brand_url',
      }
    },
    {
      title: "类别",
      dataIndex: "type",
      width: 60,
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: "custom",
      slot: "type"
    },
    {
      title: "日期",
      dataIndex: "date",
      width: 200,
      sorter: (a: any, b: any) => a.date.localeCompare(b.date),
    },
    {
      title: '属性类别',
      dataIndex: 'attrName',
      width: 100,
      sorter: (a: any, b: any) => a.attrName.localeCompare(b.attrName),
    },
    {
      title: '属性名称',
      dataIndex: 'attrValue',
      width: 100,
      sorter: (a: any, b: any) => a.attrValue.localeCompare(b.attrValue),
    },
    {
      dataIndex: 'tradeIndex.value',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex.value - b.tradeIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0, false);
      }
    },
    {
      dataIndex: 'uv.value',
      title: '访客数',
      sorter: (a: any, b: any) => a.uv.value - b.uv.value,
      align: 'right',
    },
    {
      dataIndex: 'payByrCntIndex.value',
      title: showZs.value ? '客群指数' : '支付买家数',
      sorter: (a: any, b: any) => a.payByrCntIndex - b.payByrCntIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0, false);
      }
    },
    {
      dataIndex: 'payByrCntRate.value',
      title: '客群占比',
      sorter: (a: any, b: any) => a.payByrCntRate.value - b.payByrCntIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return (text * 100).toFixed(2) + '%';
      }
    },
    {
      dataIndex: 'payRateIndex.value',
      title: showZs.value ? '支付转化指数' : '支付转化率',
      sorter: (a: any, b: any) => a.payRateIndex - b.payRateIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        return SycmTableUtils.tranRatio(showZs.value, text);
      }
    },
    {
      dataIndex: 'customerPrice.value',
      title: '客单价',
      sorter: (a: any, b: any) => a.customerPrice.value - b.customerPrice.value,
      align: 'right',
    },
    {
      dataIndex: 'uvValue.value',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.uvValue.value - b.uvValue.value,
      align: 'right',
    },
  ];
}
const getData = (brand: SycmBrand, type: string = '品牌1') => {
  const d: any[] = [];
  if (brand.CustomerPropertyPortrait) {
    for (const customerPropertyPortraitKey in brand.CustomerPropertyPortrait) {
      // @ts-ignore
      brand.CustomerPropertyPortrait[customerPropertyPortraitKey].uv.forEach((item: any, index: number) => {
        const obj: any = {
          key: index,
          brand: {
            title: brand.name,
            logo: brand.picUrl,
          },
          attrName: {
            'gender': '性别',
            'age': '年龄',
            'prov': '省份',
            'city': '城市',
            'career': '职业',
            'all': '全部',
          }[customerPropertyPortraitKey],
          attrValue: item.name,
          type: type,
          date: date.value,
          // @ts-ignore
          tradeIndex: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].tradeIndex[index],
          // @ts-ignore
          uv: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].uv[index],
          // @ts-ignore
          payByrCntIndex: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].payByrCntIndex[index],
          // @ts-ignore
          payByrCntRate: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].payByrCntRate[index],
          // @ts-ignore
          payRateIndex: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].payRateIndex[index],
          // @ts-ignore
          customerPrice: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].customerPrice[index],
          // @ts-ignore
          uvValue: brand.CustomerPropertyPortrait[customerPropertyPortraitKey].uvValue[index],
        };
        d.push(obj);
      })
    }
  }
  return d;
}
const calcDataSource = () => {
  const d: any = [];
  if (brandLists.value) {
    if (brandLists.value?.brand1 && brandLists.value?.brand1.CustomerPropertyPortrait) {
      d.push(...getData(brandLists.value?.brand1, '品牌1'));
    }
    if (brandLists.value?.brand2 && brandLists.value?.brand2.CustomerPropertyPortrait) {
      d.push(...getData(brandLists.value?.brand2, '品牌2'));
    }
    if (brandLists.value?.brand3 && brandLists.value?.brand3.CustomerPropertyPortrait) {
      d.push(...getData(brandLists.value?.brand3, '品牌3'));
    }
  }
  console.log(d);
  dataSource.value = d;
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  },__option)) {
    loading.value = true;
    date.value = (document.querySelector('.oui-date-picker-current-date')?.innerHTML || '').replaceAll('统计时间', '').replaceAll(' ', '');
    brandLists.value = await SycmBrandMonitor.assignBrandListCustomerPropertyPortrait(await SycmBrandMonitor.getBrandsByCustomer(), req);
    console.log(brandLists.value);
    calcColumns();
    calcDataSource();
    visible.value = true;
    loading.value = false;
  }
};
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0"/>
      <a-button :loading="loading" type="primary" size="small" @click="handle">一键转化</a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal v-model:visible="visible" title="竞争-竞争品牌-品牌客群-属性画像" width="95%" style="top: 20px;">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="min-height: 750px;max-height: calc(100vh - 110px);overflow-y: auto;">
        <SycmBrandCustomerAttributePortraitChart v-if="brandLists" :brand-lists="brandLists" :show-zs="showZs"/>
        <a-divider/>
        <base-table :data-source="dataSource" :columns="columns" table-name="竞争-竞争品牌-品牌客群-属性画像" :scroll="{
        y:400
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='品牌1'">
              品牌1
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='品牌2'">
              品牌2
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='品牌3'">
              品牌3
            </a-tag>
          </template>
        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
